import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useHistory } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, message, PageHeader, Typography, Modal } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { Select, Form, Input, Checkbox } from 'antd'
import api from '../requestUtils/apiConfig'
import axios from 'axios'
export default ({
    visible,
    setVisible

}) => {
    const [id, setId] = useState()
    const [type, setType] = useState()
    const [trueName, setTrueName] = useState()
    const [username, setUserName] = useState()
    const [password, setPassword] = useState()
    const [oldPassword, setOldPassword] = useState()
    const [newPassword, setNewPassword] = useState()
    const [coachId, setCoachId] = useState()

    const { Title, Text } = Typography;
    const { TextArea } = Input;
    const { TabPane } = Tabs;
    const history = useHistory()
    //提交信息
    const handleOk = () => {
        if (password == oldPassword) {
            const params = {
                id: id,
                type: type,
                trueName: trueName,
                username: username,
                password: newPassword,
                coachId: coachId,
            }
            axios({
                url: api.userInfoUpdate,
                method: 'post',
                headers: '',
                params: '',
                data: params
            }).then((res) => {
                const mes = res.data.message
                if (mes == 'success') {
                    message.success(`修改成功,新密码:${newPassword}，请注销!`)
                }
                else {
                    message.error('修改失败')
                }
                setVisible(false)
            })
        } else {
            message.error("原密码不正确")
        }

    }


    useEffect(() => {
        setId(localStorage.getItem('id') || sessionStorage.getItem('id'))
        setType(localStorage.getItem('type') || sessionStorage.getItem('type'))
        setTrueName(localStorage.getItem('trueName') || sessionStorage.getItem('trueName'))
        setUserName(localStorage.getItem('username') || sessionStorage.getItem('username'))
        setPassword(localStorage.getItem('password') || sessionStorage.getItem('password'))
        setCoachId(localStorage.getItem('coachId') || sessionStorage.getItem('coachId'))
    }, [visible])


    return (
        <>
            <Modal
                title={"个人信息修改"}
                visible={visible}
                onCancel={() => { setVisible(false) }}
                onOk={() => { handleOk() }}
                okText='提交'
            >
                <Space
                    direction='vertical'
                >
                    <Space>
                        <span>真实姓名：</span>
                        <Input
                            style={{ width: 300 }}
                            placeholder="请输入真实姓名"
                            value={trueName}
                            onChange={(e) => { setTrueName(e.target.value) }}

                        />
                    </Space>
                    <Space>
                        <span>旧密码：</span>
                        <Input.Password

                            style={{ width: 300 }}
                            placeholder="请输入旧密码"
                            value={oldPassword}
                            onChange={(e) => { setOldPassword(e.target.value) }}

                        />
                    </Space>

                    <Space>
                        <span>新密码：</span>
                        <Input.Password
                            style={{ width: 300 }}
                            value={newPassword}
                            onChange={(e) => { setNewPassword(e.target.value) }}
                        />
                    </Space>
                </Space>

            </Modal>
        </>
    )
}


